<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../../../webjars/static/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../../../webjars/static/plugins/bootstrap/css/font-awesome.min.css">

<script src="../../../webjars/static/plugins/jquery/jquery.min.js"></script>
<script src="../../../webjars/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../webjars/static/plugins/vue/vue.min.js"></script>

<script src="../js/common.js"></script>
<head>
    <title>德宏公司</title>
</head>
<body>
<div id="myapp" v-cloak>
    <div class="panel-group" id="accordion">
        <div class="panel panel-info ">
            <div class="panel-heading  text-center">
                <h3 class="panel-title inline">
                    <img src="./src.jpg" class="rounded-circle"/><a href="http://21u697519k.iok.la"> 德宏农场</a><span class="badge">{{baseInfos.length}}</span>
                </h3>
            </div>
            <div class="panel-body">
                <template v-for="baseInfo,index in baseInfos">
                    <div :class="['panel  ',getPanelStyle(index)]">
                        <div class="panel-heading">
                            <h3 class=" panel-title "><a data-toggle="collapse" data-parent="#accordion"
                                                         :href="'#'+baseInfo.id">
                                <i class="glyphicon glyphicon-tree-deciduous"></i>{{baseInfo.categoryName}}
                            </a></h3>
                        </div>
                        <div :id="baseInfo.id" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul style="list-style: none;">
                                    <template v-for="attribute in baseInfo.attributeList">
                                        <li class=" col-xs-7 col-sm-7 col-md-2 col-lg-2"><i
                                                class="glyphicon glyphicon-star-empty"></i><label>{{attribute.name}}:</label>
                                        </li>
                                        <li class=" col-xs-5 col-sm-5 col-md-1 col-lg-1"><label>{{attribute.defaultValue}}</label>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <div class="panel-footer  text-center">
                <h3 class="panel-title ">
                    <img src="./src.jpg"/>德宏农场
                </h3>
            </div>

        </div>
    </div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#myapp',
        data: {
            productionqr: {},
            baseInfos: [],
        },
        methods: {
            getDetail: function (id) {
                var url = "../../../"+ "anon/productionqr/detail/" + id;
                com.AjaxGet(url, null, "json", function (r) {
                    vm.baseInfos = r.data;
                })
            }
        }
    });
    let detail = getParams("detail");
    vm.getDetail(detail);
    var panelStyles = [' panel-info', ' panel-success', ' panel-warning', 'panel-default', ' panel-primary', ' panel-danger']

    function getPanelStyle(index) {
        if (isNaN(index)) {
            return panelStyles[0];
        }
        let styleIndex = index % panelStyles.length;
        return panelStyles[styleIndex];
    }

</script>
</html>
